<template>
    <div class="goods">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <van-list v-model:loading="loading" :finished="finished" finishedText="到底了~" @load="onLoad">
                <GoodsItem :list="(data as CatsTree.myGoods)" />
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script lang="ts" setup>
import GoodsItem from './item.vue'
import { ref } from 'vue'
import { type CatsTree } from '@/api';

// 页码类型
export interface IParams {
    _page: number
    _limit: number
    q?: string // 搜索
}

const props = defineProps<{
    // 最终需要到数据 & 数据总条数
    request: (params: IParams) => Promise<{ list: any[]; total: number }>
}>()

// 接口参数
const page = ref(1); // 当前页
const size = ref(15); // 一页几条
// 数据
const data = ref<CatsTree.myGoods>([])
// 下拉否
const refreshing = ref(false)
// 加载中
const loading = ref(false)
// 到底
const finished = ref(false)

// 加载
async function onLoad() {
    const { list, total }: any = await props.request({ _page: page.value, _limit: size.value })
    // debugger
    if (refreshing.value) {
        // 下拉刷新后，页面数据重置
        data.value = []
        refreshing.value = false
    }



    // list是刷新出的新数据
    data.value = [...data.value, ...list]

    // list数据获取到，加载状态结束
    loading.value = false

    // data长度 与 total总数对比，判断是否到底了
    if (data.value.length >= total) {
        finished.value = true
    }

    // page++ 增加页数
    page.value++
}
/**
 * 下拉刷新
 */
function onRefresh() {
    // 0. 
    refreshing.value = true
    // 1. 将 finished 设置为 false
    finished.value = false
    // 2. 将 loading 设置为 true
    loading.value = true
    // 3. 将 page 设置为 1
    page.value = 1
    onLoad()
}

// 向外暴露 刷新方法
defineExpose({
    onRefresh
})
</script>

<style lang="scss" scoped>
.goods {
    height: 100%;
    overflow: hidden;
}

// 加载中 & 到底了 展示
:deep(.van-list) {
    padding-bottom: 70px;
    background-color: #fff;
}
</style>